<template>
  <div class="container">
    <div class="pt-10" style="padding-bottom: 30px;">
      <h1 class="title">配送状況</h1>
      <div class="content">
        <p>荷物追跡番号:957664141</p>
        <p style="color: red;font-weight: 700;">配信失敗通知</p>
        <ul style="list-style:initial;padding-left: 14px;">
          <li>配送先住所が不明瞭なため、荷物が配達されませんでした</li>
          <li>あなたの荷物はフルフィルメントセンターに返送されました</li>
          <li>住所を更新してください。2024/1/3に再度発送いたします</li>
        </ul>
        <div class="button" @click="$router.push('/send')">配送情報を更新</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
.container {
  margin-top: 60px;
  padding: 0 15px;
  font-size: 14px;

  .title {
    color: #24549d;
    font-size: 20px;
    text-align: center;
    margin-bottom: 16px;
  }

  .content {
    padding: 10px;
    background-color: #f2f2f2;
    border-radius: 3px;
    display: flex;
    flex-direction: column;

    ul {
      li {
        margin-top: 8px;
      }

      margin-bottom: 32px;
    }

    .button {
      display: inline-block;
      background-color: #141414;
      color: #fff;
      font-weight: 700;
      border: none;
      border-radius: 5px;
      padding: 8px 50px;
      box-shadow: 0 0 4px rgba(128, 128, 128, .5);
      align-self: center;
    }
  }

}
</style>
